<template>
  <!-- 图表区域 -->
  <div class="main" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useChart } from "../hooks/useChart.js";
import axios from "axios";

const chartRef = ref(null);

// 使用 hooks 提供的方法
const { setOptions } = useChart(chartRef);

// 定义变量来存储报修数据和日期
const repairData = ref([]); // 存储报修数量
const repairDates = ref([]); // 存储日期

// 获取当前日期以及7天前的日期
const getLast7DaysRange = () => {
  const today = new Date();
  const endDate = today.toISOString().split("T")[0]; // 获取今天的日期 (YYYY-MM-DD)
  today.setDate(today.getDate() - 7); // 计算7天前的日期
  const startDate = today.toISOString().split("T")[0]; // 获取7天前的日期 (YYYY-MM-DD)
  return { startDate, endDate };
};

// 获取报修数据
const fetchRepairData = async () => {
  try {
    const { startDate, endDate } = getLast7DaysRange();
    const response = await axios.get(
      "http://localhost:8080/property/repair/query-all",
      {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        params: {
          appointStart: startDate,
          appointEnd: endDate,
          page: 1,
          size: 7,
        },
      }
    );

    console.log("接口返回的数据:", response.data);

    // 确保接口返回的数据存在，并从中提取 appointDate 和数量
    const data = response.data.data ?? []; // 使用 data 字段，确保数据存在

    if (data.length > 0) {
      // 获取日期和报修数量
      const dateCountMap = {}; // 用来统计每个日期的报修数量
      data.forEach((item) => {
        const date = item.appointDate;
        if (!dateCountMap[date]) {
          dateCountMap[date] = 0;
        }
        dateCountMap[date]++;
      });

      // 获取日期和报修数量
      repairDates.value = Object.keys(dateCountMap); // 日期列表
      repairData.value = Object.values(dateCountMap); // 对应的数量列表

      // 更新图表
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: repairDates.value, // 使用动态获取的日期数据
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: repairData.value, // 使用动态获取的报修数量
            type: "line",
            areaStyle: {},
          },
        ],
      };

      setOptions(option); // 更新图表
    } else {
      console.error("没有找到报修记录");
    }
  } catch (error) {
    console.error("获取报修数据时发生错误:", error);
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchRepairData(); // 页面加载时获取数据
});
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 400px;
}
</style>
